<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>{{ $route.name }}</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <a-button @click="add" type="primary">
            <a-icon type="plus-circle" />添加资料
          </a-button>
        </el-button-group>
      </div>
      <a-drawer
        :title="title+'资料'"
        placement="right"
        :closable="false"
        @close="visible = false"
        :visible="visible"
        width="450"
      >
        <el-form
          :model="tpdata"
          ref="tpdata"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="排序">
            <el-input-number v-model="tpdata.paixu"></el-input-number>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="tpdata.name"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="types">
            <el-cascader @change="handleChangerm" :options="optionss" v-model="optioncascaderd"></el-cascader>
          </el-form-item>
          <el-form-item label="选择文件" prop="fileurl" v-show="show1">
            <el-cascader
              @change="handleChange"
              :options="options"
              :show-all-levels="false"
              filterable
              title="可搜索"
              v-model="optioncascader"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="选取文件" v-show="show2">
            <button
              type="button"
              @click="innerVisible = true"
              class="btn btn-info el-form-item__label text-white"
              style="width:80px"
            >选取文件</button>
          </el-form-item>
          <el-form-item label="文件地址">
            <el-input v-model="tpdata.fileurl" disabled></el-input>
          </el-form-item>
          <el-form-item label="提交">
            <el-button type="primary" @click="submit">提交</el-button>
          </el-form-item>
        </el-form>
      </a-drawer>
      <el-dialog width="80%" title="选取图片" :visible.sync="innerVisible" append-to-body>
        <ossImglist v-bind:selected="selected"></ossImglist>
      </el-dialog>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table
        :data="Tpdata.filter(v=> v.teacherproposalid == ID )"
        border
        style="width: 100%"
        height="100%"
      >
        <el-table-column prop="ID" sortable label="ID" width="100"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="types" label="类型"></el-table-column>
        <el-table-column prop="isdown" label="下载" width="50">
          <template slot-scope="scope">
            <span v-text="scope.row.isdown?'是':'否'"></span>
          </template>
        </el-table-column>
        <el-table-column prop="paixu" label="排序" width="50"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <a
              v-if="scope.row.isdown"
              target="view_window"
              class="small"
              :href="scope.row.fileurl"
            >下载</a>
            <a
              v-else
              :href="`/wordliulan.html?url=${scope.row.fileurl}`"
              class="small"
              target="view_window"
            >查看</a>
            &nbsp;
            &nbsp;
            <el-button @click="upRow(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="deleteRow(scope.row.ID)" type="text" size="small">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { mapState } from "vuex";
import ossImglist from "@/components/newpublic/oss.vue";
import {
  asyncdeltpdata,
  asyncupdatetpdata,
  asynccreatetpdata
} from "@/plugins/api.js";
export default {
  name: "tpdata",
  computed: mapState(["Secretfile", "Tpdata"]),
  data() {
    return {
      innerVisible: false,
      options: [],
      visible: false,
      title: "添加",
      tpdata: {
        ID: "",
        fileurl: "",
        name: "",
        isdown: "",
        tablename: "",
        tableid: "",
        paixu: 1,
        types: ""
      },
      optionss: [
        {
          value: "公共课程",
          label: "公共课程"
        },
        {
          value: "私密课程",
          label: "私密课程"
        }
      ],
      optionsp: [
        {
          value: "true",
          label: "是"
        }
      ],
      value: "",
      show1: true,
      show2: false,
      rules: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        fileurl: [
          { required: true, message: "文件路径不能为空", trigger: "blur" }
        ]
      },
      optioncascader: [],
      optioncascaderd: [],
      optioncascaderf: [],
      fileurl: {
        Secretfile: {
          url: "TgtUri",
          name: "name",
          isdown: false,
          vueurl: "secretfile",
          vuename: "机密课程"
        }
      }
    };
  },
  props: ["ID"],
  watch: {},

  async mounted() {
    await this.start();
  },
  methods: {
    selected(v) {
      console.log(v);
      this.tpdata.isdown = true;
      this.tpdata.fileurl = v;
      this.innerVisible = false;
    },
    handleChange(v) {
      console.log(v);
      const tablename = v[0];
      const tableid = v[1];
      this.tpdata.tablename = tablename;
      this.tpdata.tableid = tableid;
      if (tablename == "Secretfile") {
        this.tpdata.isdown = false;
      }
      for (let v of this[tablename]) {
        if (v.ID == tableid) {
          let fileurl = this.fileurl[tablename].url;
          this.tpdata.fileurl = v[fileurl];
          let name = this.fileurl[tablename].name;
          this.tpdata.name = v[name];
        }
      }
    },
    handleChanger(value) {
      const tableisdown = value[0];
      this.tpdata.isdown = tableisdown;
      console.log(value);
    },
    handleChangerm(value) {
      const tableppt = value[0];
      this.tpdata.types = tableppt;
      if (tableppt == "公共课程") {
        this.show2 = true;
        this.show1 = false;
      }
      if (tableppt == "私密课程") {
        this.show1 = true;
        this.show2 = false;
      }
      console.log(value);
    },
    async start() {
      this.options[0] = {
        value: "Secretfile",
        label: "机密课程",
        children: this.Secretfile.map(v => {
          return {
            value: v.ID,
            label: v.name
          };
        })
      };
    },
    async submit() {
      console.log(this.tpdata);
      this.$refs["tpdata"].validate(async valid => {
        if (valid) {
          try {
            if (!this.tpdata.ID) {
              await asynccreatetpdata(this.tpdata);
            } else {
              await asyncupdatetpdata(this.tpdata);
            }
            this.$store.dispatch("actionTpdata");
            this.visible = false;
            this.$message({
              type: "success",
              message: `${this.title}成功!`
            });
          } catch (err) {
            this.$message({
              type: "error",
              message: `${this.title}失败!`
            });
          }
        } else {
          return false;
        }
      });
    },
    async deleteRow(ID) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await asyncdeltpdata({ ID });
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.$store.dispatch("actionTpdata");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add() {
      this.tpdata = {
        ID: "",
        fileurl: "",
        name: "",
        isdown: "",
        tablename: "",
        tableid: "",
        types: "",
        paixu: 1,
        teacherproposalid: this.ID
      };
      this.optioncascader = "";
      this.optioncascaderd = "";
      this.visible = true;
      this.title = "添加";
    },
    upRow(index) {
      this.tpdata = JSON.parse(JSON.stringify(index));
      console.log(this.tpdata);
      this.tpdata.teacherproposalid = this.ID;
      this.optioncascader = [this.tpdata.tablename, this.tpdata.tableid];
      this.optioncascaderd = this.tpdata.types;
      this.optioncascaderf = this.tpdata.isdown ? "是" : "否";
      console.log(this.optioncascaderf);
      if (this.optioncascaderd == "公共课程") {
        this.show2 = true;
        this.show1 = false;
      }
      if (this.optioncascaderd == "私密课程") {
        this.show1 = true;
        this.show2 = false;
      }
      this.visible = true;
      this.title = "修改";
    },
    table(v) {
      return this.fileurl[v.tablename];
    }
  },
  components: {
    ossImglist
  }
};
</script>
